<template>
    <div>
        <Row>
            <Col span="20">
            <Form ref="formValidate" :model="formValidate" :label-width="80">
                <FormItem label="所属相册" prop="title">
                    <Select v-model="formValidate.sort" style="width:200px">
                        <Option v-for="item in photoList" :value="item.id" :key="item.id">{{item['img_title'] }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="图片标题" prop="title">
                    <Input v-model="formValidate.title"></Input>
                </FormItem>
                <FormItem label="内容摘要" prop="abstr">
                    <Input v-model="formValidate.abstr" type="textarea" :autosize="{minRows: 4,maxRows: 10}" placeholder="Enter something..."></Input>
                </FormItem>
                <FormItem label="上传图片">
                    <template>
                        <div class="demo-upload-list" v-for="item in defaultList">
                            <template v-if="item.status === 'finished'">
                                <img :src="item.url">
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                </div>
                            </template>
                            <template v-else>
                                <Progress  :percent="item.percentage" hide-info></Progress>
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                :show-upload-list="false"
                                :default-file-list="defaultList"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                multiple
                                type="drag"
                                action="/api/add?action=uploadimage"
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="ios-camera" size="20"></Icon>
                            </div>
                        </Upload>
                    </template>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click.native="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click.native="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                defaultList: [
                ],
                imgName: '',
                visible: false,
                uploadList: [],
                photoList:[],
                formValidate:{
                    title:'',
                    sort:0,
                    abstr:'',
                    url:'',
                },
            }
        },
        mounted () {
               this.getPhotoList();
        },
        methods: {
            getPhotoList(){
                let that = this;
                this.fetch({
                    url: '/photos',
                    method: 'GET',
                    params: {
                    }
                }).then(function (response) {
                        that.photoList = response.data.rows;
                });
            },
            handleBeforeUpload(){

            },
            handleSuccess(file){
                this.defaultList.push(file);
                this.formValidate.url = file.url;
                console.log(this.defaultList);
            },
            handleSubmit(name){
                let that = this;
                that.$refs[name].validate((valid)=>{
                    if(valid){
                        that.fetch({
                            url: '/savePhoto',
                            method: 'post',
                            data: that.formValidate
                        }).then(function (response) {
                           if(response.data.ret==1){
                               that.$refs[name].resetFields();
                           }
                        });
                    }
                });
            },
            handleReset(){
                this.$refs[name].resetFields();
                this.formValidate.url='';
            }

        }
    }
</script>
<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>